동적 렌더링과 조건부 렌더링

React를 사용하면서 흔히 접하게 되는 개념 중 하나가 동적 렌더링과 조건부 렌더링입니다. 이 두 가지 개념은 사용자가 인터페이스와 상호작용할 때 다양한 콘텐츠를 효율적으로 표시하는 데 필수적입니다. 이 글에서는 동적 렌더링과 조건부 렌더링의 기본 개념을 이해하고, 실제로 어떻게 사용하는지 코드 예시와 함께 살펴보겠습니다.

동적 렌더링이란?

동적 렌더링은 React가 상태(state)나 속성(props)의 변화에 따라 UI를 업데이트하는 방식입니다. React의 핵심 기능으로, 사용자가 입력한 데이터나 서버로부터 받은 데이터를 기반으로 실시간으로 화면을 갱신합니다. 다음 예제를 통해 더 구체적으로 살펴보겠습니다.

import React, { useState } from 'react';

function Greeting() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} placeholder="Enter your name" />
      <p>Hello, {name}!</p>
    </div>
  );
}

export default Greeting;

위 코드에서 input 요소의 값이 변경될 때마다 name 상태가 업데이트되고, 이에 따라 p 요소에 표시되는 텍스트가 동적으로 바뀝니다.

조건부 렌더링이란?

조건부 렌더링은 특정 조건에 따라 컴포넌트나 요소를 렌더링할지 말지를 결정하는 방식입니다. 이를 통해 사용자에게 필요한 정보만을 선택적으로 보여줄 수 있습니다. 조건부 렌더링을 구현하는 다양한 방법이 있습니다.

if-else 문을 사용한 조건부 렌더링

import React, { useState } from 'react';

function UserStatus() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Log out' : 'Log in'}
      </button>
    </div>
  );
}

export default UserStatus;

이 예제에서 isLoggedIn 상태에 따라 다른 메시지와 버튼 텍스트가 표시됩니다. isLoggedIn이 true이면 "Welcome back!" 메시지와 "Log out" 버튼이, false이면 "Please log in." 메시지와 "Log in" 버튼이 나타납니다.

논리 연산자를 사용한 조건부 렌더링

논리 연산자 &&를 사용하면 조건이 참일 때만 특정 요소를 렌더링할 수 있습니다.

function WarningBanner({ warn }) {
  if (!warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

function Page() {
  const [showWarning, setShowWarning] = useState(true);

  return (
    <div>
      <WarningBanner warn={showWarning} />
      <button onClick={() => setShowWarning(!showWarning)}>
        {showWarning ? 'Hide' : 'Show'}
      </button>
    </div>
  );
}

export default Page;

showWarning 상태가 true일 때만 WarningBanner 컴포넌트가 렌더링됩니다. false일 경우에는 아무것도 렌더링되지 않습니다.

더 알아보기

React 상태 관리: 상태(state)를 관리하는 다양한 방법과 그 필요성에 대해 알아보세요.
조건부 렌더링: 조건부 렌더링의 다양한 기법을 더 깊이 이해하고 실습해보세요.
React 공식 문서: 조건부 렌더링과 상태 관리에 대한 자세한 내용.

내용 요약

동적 렌더링과 조건부 렌더링은 React의 핵심 기능으로, 사용자와의 상호작용에 따라 UI를 실시간으로 업데이트하고 필요한 정보만을 선택적으로 표시하는 데 매우 유용합니다. 이 두 가지 개념을 이해하고 적절하게 활용하면 더욱 직관적이고 반응성 높은 웹 애플리케이션을 만들 수 있습니다.

동적 렌더링이란?​

조건부 렌더링이란?​

if-else 문을 사용한 조건부 렌더링​

논리 연산자를 사용한 조건부 렌더링​

더 알아보기​

내용 요약​